<template>
    <div class="person">
        <h1>情况5：监视多个数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>车：{{ person.car.car1 }} 、{{ person.car.car2 }} </h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeCar1">修改Car1</button>
        <button @click="changeCar2">修改Car2</button>
        <button @click="changeCar">修改所有Car</button>
    </div>
</template>


<script lang="ts" setup name="Person">
    
    import {watch, reactive} from 'vue'

    let person = reactive({
        name: '张三',
        age: 18,
        car: {
            car1: '奔驰',
            car2: '宝马'
        }   
    })

    function changeName() {
        person.name += '~'
    }
    function changeAge() {
        person.age += 1
    }
    function changeCar1() {
        person.car.car1 = '劳斯莱斯'
    }
    function changeCar2() {
        person.car.car2 = '宾利'
    }
    function changeCar() {
        person.car = {car1: '仰望', car2: '小米'}
    }

    // 监视多个数据

    // 将场景1~4放到数组里即可
    // 这里监听 person.age、person.car.c1、person.car.c2(不监听person.car)
    watch([()=> person.age, person.car], (newValue, olderValue)=>{
        console.log("person变化了!", newValue, olderValue)
    })

</script>


<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>